var interval = 0;

$(function() {
	//join_game();
	$('#playerName').val($('#userName').val());
	interval = setInterval("refresh()", 5000);
});

function refresh() {
	$.getJSON('', {
			gid: $('#gid').val(),
			eid: $('#eid').val()
		}, function(data) {
			if (data.eid_dif > 0) {
				$('#eid').val(+$('#eid').val() + +data.eid_dif);
				get_game_state();
			} else if (data.eid_dif < 0) {
				var winners = get_game_state();
				alert(winners);
			}
		});
}

function get_game_state() {
	$.getJSON('', {
			gid: $('#gid').val(),
			userName: $('#userName').val()
		}, function(data) {
			set_player_state(data.player, data.turn);
			set_opponents_state(data.opponents, data.turn);
			
			if (data.winners)
				return data.winners;
		});
}

function set_player_state(player, turn) {
	$('#playerName').val("");
	$('#playerDeck').val("");
	$('#playerPairs').val("");

	$('#playerName').val("<h1>" + player.name + "</h1>");
	
	if (turn == player.name) {
		$('#playerName').val($('#playerName').val() + "\nCurrent turn is here...");
		$('#turn-btn').val("<input type='button' value='Confirm Turn' onclick='take_turn()'/>");
	} else {
		$('#turn-btn').val("<input type='button' value='Confirm Turn' onclick='take_turn()' disabled='disabled'/>");
	}
	
	for (var i in player.hand) {
		$('#playerDeck').val($('#playerDeck').val() + "<input type='button' id='" + player.hand[i] + "' value='" + player.hand[i] + "' onclick='click_card(" + player.hand[i] + ")'/>");
	}
	
	for (var j in player.pairs) {
		$('#playerPairs').val($('#playerPairs').val() + player.pairs[j] + "\t");
	}
}

function set_opponents_state(opponents, turn) {
	$('#opponents').val("");
	
	for (var x in opponents) {
		$('#opponents').val($('#opponents').val() + "<button onclick='click_target(" + opponents[x].name + ")'><table border='1' width='75%'><tr><td colspan='2' align='center'>" + opponents[x].name);
		
		if (opponents[x].name == turn)
			$('#opponents').val($('#opponents').val() + "</br>Current turn is here...</td></tr>");
		else
			$('#opponents').val($('#opponents').val() + "</td></tr>");
		
		$('#opponents').val($('#opponents').val() + "<tr><td colspan='2' align'center'>");
		
		for (var y = 0; y < opponents[x].hand; y++) {
			$('#opponents').val($('#opponents').val() + "X ");
		}
		
		$('#opponents').val($('#opponents').val() + "</td></tr>");
		
		$('#opponents').val($('#opponents').val() + "<tr><td colspan='2' align='center'>");
		
		for (var z in opponents[x].pairs) {
			$('#opponents').val($('#opponents').val() + opponents[x].pairs[z] + "\t");
		}
		
		$('#opponents').val($('#opponents').val() + "</td></tr></table></button>");
	}
}

function take_turn(card, target, userName) {
	$.getJSON('', {
			card: $('#card').val(),
			target: $('#target').val(),
			userName: $('#userName').val()
		}, function(data) {
			/****** handle result:int here ******/
			get_game_state();
		});
}

function click_card(card) {
	$('#card').val(card);
}

function click_target(target) {
	$('#target').val(target);
}

/*function join_game() {
	$.getJSON('', {
			userName: $('#userName').val(),
			gid: $('#gid').val();
		}, function(data) {
			
		});
}*/